<template>
  <div class="page">
    <div class="header" :class="{scroll:isScrollTop}">
      <div class="classify-icon" @click="$router.push({name: 'classify'})"></div>
      <div class="search-wrap" @click="search">
        <div class="search-icon"></div>
        <div class="text">请输入宝贝名称</div>
      </div>
      <div class="login" v-if="!isLogin" @click="$router.push({name: 'login'})">登陆</div>
      <div class="my-icon" v-else @click="$router.push({name:'my'})"></div>
    </div>
    <div class="banner-wrap">
      <swiper ref="bannerSwiper" :options="bannerOptions">
        <swiper-slide v-for="(item,index) in swipers" :key="index">
          <img :src="item.image" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="quick-nav">
      <ul>
        <li v-for="item in indexNavs" :key="item.cid" @click="$router.push({name:'classify',query:{cid:item.cid}})">
          <img v-lazy="item.image" alt="">
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
    <template v-for="(item, index) in indexProducts">
      <section class="goods-main" :key="index" v-if="(index+1) % 2 !== 0">
        <div :class="'classify-name color-' + index">—— {{item.title}} ——</div>
        <section class="goods-row-1">
          <div class="goods-column"
               @click="item.items && $router.push({name: 'goods-detail', query: {gid: item.items[0].gid}})">
            <div class="goods-title">{{item.items && item.items[0].title}}</div>
            <div class="goods-tip">精品打折</div>
            <div :class="'goods-price bg-color-'+index">{{item.items && item.items[0].price}}元</div>
            <div class="goods-image"><img v-lazy="item.items && item.items[0].image" alt=""></div>
          </div>
          <div class="goods-column">
            <div class="goods-list" v-for="(item2,index2) in item.items.slice(1,3)" :key="index2"
                 @click="$router.push({name: 'goods-detail', query: {gid: item2.gid}})">
              <div class="goods-list-title">{{item2.title}}</div>
              <div class="goods-list-tip">品质精挑</div>
              <div class="goods-list-image"><img v-lazy="item2.image" :alt="item2.title"></div>
            </div>
          </div>
        </section>
        <ul class="goods-row-2">
          <li class="goods-list" v-for="(item2,index2) in item.items.slice(3,7)" :key="index2"
              @click="$router.push({name: 'goods-detail', query: {gid: item2.gid}})">
            <div class="goods-title">{{item2.title}}</div>
            <div class="goods-image">
              <img v-lazy="item2.image" :alt="item2.title">
            </div>
            <p class="price">¥{{item2.price}}</p>
            <p class="price-line">¥{{item2.price * 2}}</p>
          </li>
        </ul>
      </section>
      <section class="goods-main" :key="index" v-else>
        <div :class="'classify-name color-' + index">—— {{item.title}} ——</div>
        <section class="goods-row-1">
          <div class="goods-column-2" v-for="(item2,index2) in item.items.slice(0,2)" :key="index2"
               @click="$router.push({name: 'goods-detail', query: {gid: item2.gid}})">
            <div class="goods-title">{{item2.title}}</div>
            <div class="goods-tip">火爆开售</div>
            <div class="goods-image"><img v-lazy="item2.image" :alt="item2.title"></div>
          </div>
        </section>
        <ul class="goods-row-2">
          <li class="goods-list" v-for="(item2,index2) in item.items.slice(2,6)" :key="index2"
              @click="$router.push({name: 'goods-detail', query: {gid: item2.gid}})">
            <div class="goods-title">{{item2.title}}</div>
            <div class="goods-image">
              <img v-lazy="item2.image" :alt="item2.title">
            </div>
            <p class="price">¥{{item2.price}}</p>
            <p class="price-line">¥{{item2.price * 2}}</p>
          </li>
        </ul>
      </section>
    </template>

    <section class="goods-recom-nav">
      <span class="line"></span>
      <div class="recom-wrap">
        <i class="icon"></i>
        <p class="text">为您推荐</p>
      </div>
      <span class="line"></span>
    </section>

    <section class="goods-recom">
      <div class="goods-list" v-for="item in recommProducts" :key="item.gid"
           @click="$router.push({name: 'goods-detail', query: {gid: item.gid}})">
        <div class="goods-image"><img v-lazy="item.image" alt=""></div>
        <div class="goods-title">{{item.title}}</div>
        <div class="goods-price">¥{{item.price}}</div>
      </div>
    </section>
    <my-search :show="showSearch"></my-search>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import MySearch from 'components/MySearch'
import { swiperData, indexNav, indexProduct, recommProduct } from 'api/index'

export default {
  name: 'index',
  data () {
    return {
      showSearch: { show: false },
      isScrollTop: false,
      swipers: [],
      indexNavs: [],
      indexProducts: [],
      recommProducts: [],
      bannerOptions: {
        loop: false,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
      }
    }
  },
  methods: {
    search () {
      this.showSearch.show = true
      document.documentElement.style.height = '100%'
      document.body.style.height = '100%'
      document.body.style.overflow = 'hidden'
    },
    eventScrollTop () {
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
      if (scrollTop >= 150) {
        if (this.isScroll) {
          this.isScroll = false
          this.isScrollTop = true
        }
      } else {
        if (!this.isScroll) {
          this.isScroll = true
          this.isScrollTop = false
        }
      }
    },
    getSwiper () {
      swiperData().then(res => {
        if (res.code === 200) {
          this.swipers = res.data
        }
      })
    },
    getIndexNav () {
      indexNav().then(res => {
        if (res.code === 200) {
          this.indexNavs = res.data
        }
      })
    },
    getIndexProduct () {
      indexProduct().then(res => {
        if (res.code === 200) {
          this.indexProducts = res.data
        }
      })
    },
    getrecommProduct () {
      recommProduct().then(res => {
        if (res.code === 200) {
          this.recommProducts = res.data
        }
      })
    }
  },
  components: {
    MySearch
  },
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin
    }),
    swiper () {
      return this.$refs.bannerSwiper.$swiper
    }
  },
  created () {
    this.isScroll = true
    window.addEventListener('scroll', this.eventScrollTop)

    this.getSwiper()
    this.getIndexNav()
    this.getIndexProduct()
    this.getrecommProduct()
  },
  // 组件销毁时执行
  destroyed () {
    // console.log('destroyed');
    window.removeEventListener('scroll', this.eventScrollTop)
  },

  // activated 和 deactivated  这两个函数是专门针对keep-alive的生命周期的函数
  // 有keep-alive（缓存）的时候必须要在activated中再执行一次created中的方法，比如此处的scroll事件的监听
  activated () {
    this.isScroll = true
    window.addEventListener('scroll', this.eventScrollTop)
  },
  //keep-alive(缓存)页面离开时执行
  deactivated () {
    // console.log('deactivated');
    window.removeEventListener('scroll', this.eventScrollTop)
  }
}
</script>

<style lang="scss" scoped>
  .page {
    padding-bottom: 1.5rem;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    right: 0;
    padding: 0 0.3rem;
    height: 1rem;
    background-image: linear-gradient(rgba(1, 1, 1, .2), hsla(1, 0%, 100%, 0));

    &.scroll {
      background-image: linear-gradient(rgb(235, 22, 37), rgba(255, 255, 255, 0));
    }

    .classify-icon {
      width: 0.6rem;
      height: 0.6rem;
      background-image: url("../../../assets/images/common/class.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 50%;
    }

    .search-wrap {
      width: 5.26rem;
      height: .5rem;
      background: hsla(0, 0%, 100%, .5);
      border-radius: 4px;
      display: flex;
      align-items: center;

      .search-icon {
        width: 0.44rem;
        height: 0.44rem;
        margin: 0 0.2rem;
        background: url("../../../assets/images/common/search.png") no-repeat 50%;
        background-size: 100%;
      }

      .text {
        font-size: 0.32rem;
        color: #fff;
      }
    }

    .login {
      font-size: 0.32rem;
      color: #fff;
    }

    .my-icon {
      width: 0.6rem;
      height: 0.6rem;
      background-image: url("../../../assets/images/home/index/my.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .banner-wrap {
    width: 100%;
    height: 3.66rem;

    img {
      display: block;
      width: 100%;
      height: 3.66rem;
    }
  }

  .quick-nav {
    background: #fff;
    margin: 0.2rem 0 0 0;

    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.6rem;
      padding: 0 0.2rem;

      li {
        width: 1.4rem;

        img {
          display: block;
          width: 0.8rem;
          height: 0.8rem;
          margin: 0 auto;
        }

        p {
          margin: 0.15rem 0 0 0;
          font-size: 0.28rem;
          color: #7b7f82;
          text-align: center;
        }
      }
    }
  }

  .goods-main {
    margin: .2rem 0 0 0;
    height: 7.36rem;
    background: #fff;

    .classify-name {
      height: .64rem;
      text-align: center;
      font-size: .32rem;
      line-height: .64rem;
      border-bottom: 1px solid #efefef;

      &.color-0 {
        color: #f73b61;
      }

      &.color-1 {
        color: #fe6719;
      }

      &.color-2 {
        color: #5fc600;
      }
    }

    .goods-row-1 {
      display: flex;
      height: 3.5rem;
      border-bottom: 1px solid #efefef;

      .goods-column {
        width: 50%;
        height: 100%;
        border-right: 1px solid #efefef;
        box-sizing: border-box;

        &:nth-child(2) {
          border-right: none;
        }

        .goods-title {
          font-size: .28rem;
          font-weight: bold;
          margin: .2rem .1rem 0;
          line-height: .32rem;
          height: .32rem;
          overflow: hidden;
        }

        .goods-tip {
          display: inline-block;
          font-size: .28rem;
          line-height: .4rem;
          margin: 0 .2rem;
        }

        .goods-price {
          display: inline-block;
          height: .4rem;
          padding: 0 .1rem;
          font-size: .28rem;
          color: #fff;
          border-radius: .2rem;

          &.bg-color-0 {
            background: #f21d4f;
          }

          &.bg-color-2 {
            background: #5fc600;
          }
        }

        .goods-image {
          width: 3rem;
          height: 2rem;
          overflow: hidden;
          margin: .2rem auto 0;

          img {
            display: block;
            width: 100%;
            height: auto;
          }
        }

        .goods-list {
          position: relative;
          height: 50%;
          border-bottom: 1px solid #efefef;
          box-sizing: border-box;

          &:nth-child(2) {
            border: none;
          }

          .goods-list-title {
            position: absolute;
            left: .2rem;
            top: .2rem;
            width: 2.04rem;
            height: .32rem;
            overflow: hidden;
            font-size: .28rem;
            font-weight: 700;
          }

          .goods-list-tip {
            font-size: .24rem;
            color: #7b7f82;
            position: absolute;
            left: .2rem;
            top: .6rem;
          }

          .goods-list-image {
            width: 1.2rem;
            height: 1.2rem;
            overflow: hidden;
            position: absolute;
            right: .2rem;
            top: .2rem;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .goods-column-2 {
        width: 50%;
        height: 100%;
        border-right: 1px solid #efefef;
        box-sizing: border-box;

        &:nth-child(2) {
          border-right: none;
        }

        .goods-title {
          font-size: .28rem;
          font-weight: bold;
          margin: .2rem .1rem 0;
          line-height: .32rem;
          height: .32rem;
          overflow: hidden;
        }

        .goods-tip {
          font-size: .28rem;
          line-height: .4rem;
          color: #7b7f82;
          margin: 0 .2rem;
          text-align: center;
        }

        .goods-image {
          width: 1.8rem;
          height: 2rem;
          overflow: hidden;
          margin: 0.1rem auto 0;

          img {
            display: block;
            width: 100%;
            height: auto;
          }
        }
      }
    }

    .goods-row-2 {
      display: flex;
      justify-content: space-between;
      height: 3.2rem;

      .goods-list {
        width: 25%;
        height: 100%;
        border-right: 1px solid #efefef;

        &:last-child {
          border-right: none;
        }

        .goods-title {
          height: .4rem;
          overflow: hidden;
          font-size: .28rem;
          font-weight: 700;
          text-align: center;
          margin-top: .2rem;
        }

        .goods-image {
          width: 1.5rem;
          height: 1.5rem;
          overflow: hidden;
          margin: 0 auto;
          margin-top: .2rem;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .price {
          text-align: center;
          font-size: .28rem;
          color: #d32a4e;
          margin-top: .1rem;
        }

        .price-line {
          text-align: center;
          font-size: .28rem;
          color: #7b7f82;
          text-decoration: line-through;
        }
      }
    }

  }

  .goods-recom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;

    .line {
      width: 35%;
      height: 1px;
      background: #d4d4d4;
    }

    .recom-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 1.8rem;
      height: .44rem;

      .icon {
        width: .4rem;
        height: .4rem;
        background: url("../../../assets/images/home/index/recom.png") no-repeat 50% 50%;
        background-size: 100%;
      }

      .text {
        font-size: .32rem;
        font-weight: 700;
      }
    }
  }

  .goods-recom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 .2rem;

    .goods-list {
      width: 48.5%;
      background-color: #fff;
      margin: .2rem 0 0 0;
      padding: .2rem;
      box-sizing: border-box;

      .goods-image {
        overflow: hidden;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .goods-title {
        height: .8rem;
        margin: .15rem 0 0 0;
        overflow: hidden;
        font-size: .28rem;
        line-height: 1.4em;
      }

      .goods-price {
        font-size: .32rem;
        line-height: 1.3em;
        color: #d32a4e;
      }
    }
  }
</style>
